<!DOCTYPE html>
<html lang="ch-zn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="表白墙.css">
    <link rel="stylesheet" href="表白墙.js">
    <title>表白墙</title>
</head>

<body>
    <div class="container">
        <h1>表白墙</h1>
        <p>请输入内容后点击提交,信息会显示到下方表格</p>
        <div class="row">
            <span>谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说:</span>
            <input type="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>
        <div class="row">
            <button id="revert">撤销</button>
        </div>
    </div>
    <script>
        // 提交操作点击提交按钮,把输入的内容提交到页面上显示
        // 点击提交按钮,获取到三个输入框的文本内容
        // 原理:创建一个新的 div.row 把内容构造到这个div中
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('#submit');
        let containerDiv = document.querySelector('.container');
        button.onclick = function () {
            //获取内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if ( from == '' || to == ''||msg == ''){
                return;
            }
            //构造新的div
            let rowDiv = document.createElement('div');
            rowDiv.className = 'row message';
            rowDiv.innerHTML = from + "对" + to + "说:" + msg;
            containerDiv.appendChild(rowDiv);
            //清空之前的内容
            for (let input of inputs){
                input.value = '';
            }
        }
        let revertButton = document.querySelector("#revert");
        revertButton.onclick = function() {
            //删除最后一条信息
            //选中所有的row,找出最后一个row进行删除
            let rows = document.querySelectorAll('.message');
            if(rows == null || rows.length == 0){
                return ;
            }
            containerDiv.removeChild(rows[rows.length - 1]);
        }
    </script>
</body>

</html>